
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:主播列表页
@author:成都市一颗优雅草科技有限公司     
@version V3.0
@松鼠聚合直播系统
注意：本前端源码遵循 蜻蜓优雅草产品开源授权协议，本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->














<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="image-list">
			<view class="image-item" 
					:class="'image-item' + (isLogin ? '' : ' image-item-nologin')" 
					v-for="(video,index) in videoList" :key="index"  @click="playVideo(index)">
				<view class="blank-image" v-if="!video.img"></view>
				<image class="image"
					:src="video.img"
					v-if="video.img"
				  />
				  <div class="item-title" v-if="video.address">{{video.title}}</div>
				  <div class="play-num" v-if="video.address"><uni-icons type="eye" size="16" style="margin-right: 5px;" color="#ffffff"></uni-icons>{{video.play_times}}</div>
				  <div class="like-box" v-if="0" :class="video.liked ? 'liked' : ''" @click="collectVideo(video.id)">
					  <uni-icons type="heart-filled" size="30" :color="video.liked ? '#ff6759' : '#ffffff'"></uni-icons>
				  </div>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/yangxiaochuang-icons/yangxiaochuang-icons.vue"
	export default {
		components: {uniIcons},
		data() {
			return {
				isLogin:false,
				page:1,
				videoList:[]
			}
		},
		onLoad(){
			this.loadList();
		},
		onShow(){
			this.isLogin = this.appInfo.isLogin();
			this.loadList();
		},
		methods: {
			loadList:function(){
				var page = this.page;
				if(this.videoList.length == 0){
					uni.showLoading({
						title:"载入中..."
					});
				}
				
				this.request.get({
					url:"index.php/index/index/get_videos?page="+page,
					success:(res)=>{
						uni.hideLoading();
						if(res.data.code == 1){
						  this.videoList = page == 1 ? res.data.data : this.videoList.concat(res.data.data);
						}
					},
					fail:function(){
						uni.hideLoading();
					}
				})
			},
			playVideo:function(index){
				if(!this.videoList[0].address){
					uni.showToast({title:"数据还未加载完成",icon:"none"});
					return;
				}
				if(!this.isLogin){
					uni.showModal({
						title:"登陆提示",
						content:"请先登陆会员后再试！",
						showCancel:false,
						success(){
							uni.navigateTo({
								url:"../login/login"
							});
						}
					});
					return;
				}
				this.appInfo.playInfo = this.videoList[index];
				uni.navigateTo({
					url:"../play/play?video=true"
				})
			},
			collectVideo:function (id) {
			  window.event? window.event.cancelBubble = true : event.stopPropagation();
			  this.request.get({
				  url:"index.php/index/member/collect?id="+id,
				  success:(res)=>{
					  if(res.data.code == 1){
						  uni.showToast({
							icon:"none",
							title:res.data.msg
						  });
					  }else{
						  uni.showModal({
						  	title:"提示",
							content:res.data.msg
						  })
					  }
				  },
				  faild:(error)=>{
					  
				  }
			  });
			}
		}
	}
</script>

<style>
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.image-list{
	  padding: 10rpx;
			width: 730rpx;
			display: flex;
			flex-direction: row;
			flex-wrap:wrap;
	}
	.image-list .image-item{
	  padding: 10rpx;
			width: 343rpx;
			height: 343rpx;
	  position: relative;
			display: flex;
	}
	.image-list .image-item .image{
			  width: 343rpx;
			  height: 343rpx;
			  border-radius: 10rpx;
	}
	.image-list .image-item-nologin .image{
			  filter: blur(5rpx);
			  -webkit-filter: blur(5rpx);
			}
	.blank-image{
	  width: 343rpx;
	  height: 343rpx;
	  border-radius: 10rpx;
	  background: whitesmoke;
	}
	.play-num{
	  position: absolute;
	  color: #eff6f4;
	  font-size: 26rpx;
	  bottom: 40rpx;
	  right: 20rpx;
	}

	.item-title{
	  display: inline-block;
	  width: 225rpx;
	  height: 39rpx;
	  overflow: hidden;
	  position: absolute;
	  bottom: 40rpx;
	  left: 20rpx;
	  font-size: 28rpx;
	  color: #eff6f4;
	  overflow: hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	}
	.like-box{
	  position: absolute;
	  font-size: 50rpx;
	  color: white;
	  left: 290rpx;
	  top:25rpx;
	}
	.like-box.liked{
	  color: #ff6759;
	}
</style>
